{% set _pageRoute = '/_mder' %}

{% extends '_layouts/default.twig' %}

{% block body %}
  <div class="page-header">
    <h1> Bootswatch css style list <small>Subtext for header</small></h1>
  </div>

  <div class="row J-select-theme">
    {% for style in styleList %}
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
        <img src="{{ bootswatchUrl }}/{{ style }}/{{ imgName }}" alt="{{ style }}">
        <div class="caption">
          <h3>{{ style }}</h3>
          {# <p> ... </p> #}
          <p>
            {% if _globals.params.cssStyle==style %}
            <a href="javascript:void(0);" class="btn btn-default disabled" role="button" disabled> Current is {{ style|capitalize }}</a>
            {% else %}
            <a href="javascript:void(0);" class="btn btn-primary css-style" role="button" data-style="{{ style }}"> Apply {{ style|capitalize }}</a>
            {% endif %}
          </p>
        </div>
      </div>
    </div>
    {% endfor %}

  </div>
{% endblock %}